import React, {Component} from 'react';
import {reqWeather} from '../../api/index';
import {withRouter, Redirect} from 'react-router-dom';
import menuList from '../../config/menuConfig';
import '../header/index.less';
import {formateDate} from '../../utils/dateUtils'
import memoryUtils from '../../utils/memoryUtils';
import storageUtils from '../../utils/storageUtils';
import {Modal} from 'antd';
import LinkButton from "../link-button";

/*头部导航的组件*/

class Header extends Component {
    state = {
        currentTime: formateDate(Date.now()),//当前时间字符串
        dayPictureUrl: '',//天气图片url
        weather: '',//天气的文本
    }
    getTime = () => {
        //每隔1s获取当前时间，并更新状态数据currentTime
        this.intervalID=setInterval(() => {
            const currentTime = formateDate(Date.now())
            this.setState({currentTime})
        }, 1000)
    }
    getWeather = async () => {
        //调用接口请求异步获取数据
        const {dayPictureUrl, weather} = await reqWeather('南京')
        //更新状态
        this.setState({dayPictureUrl, weather})
    }

    getTitle = () => {
        //得到当前请求路径
        const path = this.props.location.pathname
        let title
        menuList.forEach(item => {
            if (item.key === path) {//如果当前item对象的key与path一样，item的title就是需要显示的title
                title = item.title
            } else if (item.children) {
                //在所有的子item中查找匹配的
                const cItem = item.children.find(cItem => cItem.key === path)
                //如果有值才说明有匹配的
                if (cItem) {
                    title = cItem.title
                }
            }
        })
        return title
    }

    /*
    退出登录
     */
    logout = () => {
        //显示确认框
        Modal.confirm(
            {
                title: '确定退出吗?',
                onOk: () => {
                    //删除保存的user数据
                    storageUtils.removeUser()
                    storageUtils.removeToken()
                    memoryUtils.user = {}
                    //跳转到login
                    this.props.history.replace('/login')
                },
                onCancel() {
                    console.log('Cancel');
                },
            }
        )
    }

    /*
    * 第一次render()之后执行一次
    * 一般在此执行异步操作，发ajax请求/启动定时器*/
    componentDidMount() {
        //获取当前的时间
        this.getTime()
        //获取天气
        this.getWeather()
    }

    /*
    当前组件卸载之前调用
    */
    componentWillUnmount() {
        //清楚定时器
        clearInterval(this.intervalID)
    }

    render() {
        const {currentTime, dayPictureUrl, weather} = this.state
        const user = memoryUtils.user
        //如果内存没有存储user  ==>当前没有登录
        if (!user) {
            return <Redirect to='/login'/>
        }
        //得到当前需要显示的title
        const title = this.getTitle()
        return (
            <div className="header">
                <div className="header-top">
                    <span>{user}</span>
                    <LinkButton onClick={this.logout}>退出</LinkButton>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">{title}</div>
                    <div className="header-bottom-right">
                        <span>{currentTime}</span>
                        <img src={dayPictureUrl} alt="weather"/>
                        <span>{weather}</span>
                    </div>
                </div>
            </div>
        )
    }

}

export default withRouter(Header)